<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Guns - 登录</title>

    <link rel="shortcut icon" href="${ctxPath}/static/favicon.ico">
    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
    <style>

        body {
            margin:0;
        }
        canvas {
            background-color:#000;
        }

    </style>
</head>
<div>
<body class="gray-bg">


<div class="middle-box text-center loginscreen" style="position: fixed;margin-left: 35%">
    <div style="padding: 100px 0px;">
        <div>
            <h1 class="logo-name">HYPY</h1>
        </div>
        <h4>欢迎使用停车场系统</h4>
        <br/>
        <h4 style="color: red;">${tips!}</h4>
        <form class="m-t" role="form" action="${ctxPath}/login" method="post">
            <div class="form-group">
                <input type="text" name="username" class="form-control" placeholder="用户名" required="">
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="密码" required="">
            </div>
            @if(kaptcha.getKaptchaOnOff() == true){
            <div class="form-group" style="float: left;">
                <div class="col-sm-8" style="padding-left: 0px; padding-right: 0px;">
                    <input class="form-control" type="text" name="kaptcha" placeholder="验证码" required="">
                </div>
                <div class="col-sm-4" style="padding-left: 0px; padding-right: 0px;">
                    <img src="${ctxPath}/kaptcha" id="kaptcha" width="100%" height="100%"/>
                </div>
            </div>
            @}
            <div class="form-group" style="float: left;">
                <div class="checkbox" style="text-align: left">
                    <label>
                        <input type="checkbox" name="remember" style="margin-top: 2px;">记住我
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
            </p>
        </form>
    </div>
</div>
</div>
<script>
    $(function () {
        $("#kaptcha").on('click', function () {
            $("#kaptcha").attr('src', '${ctxPath}/kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
        });
    });
    const settings = {
        pointCount: 50,
        startSpeed: 1.3,
        availableColors: ["#aaa01f", "#bba301", "#eaf2a1", "#aacccc", "#faf3aa"]
    };

    let context;
    let objects;
    let mousePos = {};

    const canvas = document.createElement("canvas");
    const init = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        objects = [];

        document.body.appendChild(canvas);

        context = canvas.getContext("2d");

        for (let i = 0; i <= settings.pointCount; i++) {
            let plusOrMinusX = Math.random() < 0.5 ? -1 : 1;
            let plusOrMinusY = Math.random() < 0.5 ? -1 : 1;

            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const z = Math.random() * - 150;

            const v = {
                x: plusOrMinusX * Math.random() * settings.startSpeed,
                y: plusOrMinusY * Math.random() * settings.startSpeed,
                z: Math.random() * settings.startSpeed * 4,
            };

            const colorIndex = Math.floor(
                Math.random() * settings.availableColors.length
            );

            objects.push(
                new Point(canvas, settings.availableColors[colorIndex], x, y, z, v)
            );
        }

        requestAnimationFrame(() => {
            draw();
    });
        bindMouseMove();
    }


    class Point {
        constructor(canvas, color, x, y, z, v) {
            this.canvas = canvas;
            this.color = color;
            this.x = x;
            this.y = y;
            this.z = z;
            this.v = v;
            this.radius = this.calulateRadius();
        }

        calulateRadius() {
            return Math.abs(this.z / 120);
        }

        calculatePosition() {
            const diameter = 2 * this.radius;

            if (
                this.x > this.canvas.width ||
                this.y > this.canvas.height ||
                this.x + diameter < 0 ||
                this.y + diameter < 0
            ) {
                this.x = this.canvas.width / 2;
                this.y = this.canvas.height / 2;
                this.z = -40;
            }

            this.radius = this.calulateRadius();

            this.x += this.v.x;
            this.y += this.v.y;
            this.z += this.v.z;
        }

        adjustTowardsMouse(distToMouse, mouseX, mouseY) {
            if (mouseX > this.x) {
                this.v.x += 10 / distToMouse;
            }
            if (mouseY > this.Y) {
                this.v.y += 10 / distToMouse;
            }

            if (mouseX <= this.x) {
                this.v.x -= 10 / distToMouse;
            }
            if (mouseY <= this.Y) {
                this.v.y -= 10 / distToMouse;
            }
        }

        draw(context) {
            context.beginPath();
            context.strokeStyle = this.color;
            context.fillStyle = this.color;
            context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            context.fill();
        }
    }



    const draw = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);

        objects.forEach(object => {
            object.calculatePosition();

        if (mousePos) {
            const xDiff = object.x - mousePos.x;
            const yDiff = object.y - mousePos.y;

            const pointDist = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));

            if (pointDist < (150 + object.radius)) {
                object.adjustTowardsMouse(pointDist, mousePos.x, mousePos.y);
            }
        }

        object.draw(context);
    });

        requestAnimationFrame(draw);
    };

    const bindMouseMove = () => {
        listener = document.addEventListener('mousemove', e => {
            //document.removeEventListener('mousemove', listener);
            mousePos.x = e.clientX;
        mousePos.y = e.clientY;
        //bindMouseMove();
    });
    }
    init();

    window.addEventListener('resize', () => {
        init();
    });

</script>

</body>

</html>
